<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
        }
    </style>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div style="height: 200px;font-size: 30px;">你知不知道我有个缺点,缺点你</div>
    <script>
        // 给一个元素修改样式有几种方式?

        // 1. 行内
        // 2. 内联 
        // 3. 外链 

        // 内联 外链优先级一样   优先级 小于 行内 


        //操作样式 

        // 假设 已经获取了元素
        // 读 
        // 1. 获取行内样式 
        //  语法:
        //      元素.style.样式
        //  返回:
        //      元素样式对应的值
        //  注意事项:
        //      这种方式只能获取行内样式 
        //      样式名如果有中划线 比如font-size 必须用 驼峰命名或者数组关联语法
        //       ['font-size']  fontSize

        // 2.  获取非行内 
        //  语法:
        //      window.getComputedStyle(元素).样式名
        //  返回值:
        //      样式名对应的值
        // 注意事项:
        //       样式名如果有中划线 比如font-size 必须用 驼峰命名或者数组关联语法
        //       ['font-size']  fontSize




        // 写
        // 1 . 修改行内样式  
        //  元素.style.样式 = 新值



        // 2 .内联和外链不能通过js 修改样式  
            // 如何解决?
            // 行内样式 优先级最高  
            // 可以用行内的方式进行修改 
            // 这种方式 会在行内新加样式  而不会修改内联和外联  




        // 获取行内样式  
        // var divEle = document.querySelector('div');
        // console.log(divEle.style.height);
        // // console.log(divEle.style.font-size);// 报错不支持中划线
        // console.log(divEle.style.fontSize);
        // console.log(divEle.style['font-size']);

        // 使用这种方式获取非行内
        // console.log(divEle.style.width);
        // console.log(divEle.style['background-color']);
        // 方面返回null 说明 拿不到
        // 获取非行内样式 
        // console.log(window.getComputedStyle(divEle).height);
        // console.log(window.getComputedStyle(divEle)['background-color']);

        // 修改行内样式 
        var divEle = document.querySelector('div');
        divEle.style.fontSize = '66px';
        divEle.style.height = '600px';
        divEle.style.backgroundColor = 'green';

        

        
    </script>
</body>
</html>